<template>
	<div class="nav">
		<el-menu 
			:default-active="activeIndex"
			class="el-menu-demo"
			mode="horizontal"
			background-color="#545c64"
			text-color="#fff"
			active-text-color="#ffd04b"
			:router="true"
			:ellipsis="false">
			<el-menu-item>
				<img style="width: 50px; vertical-align: middle;" src="@/assets/task-logo.png" alt="task logo"/>
			</el-menu-item>
			  
			<div class="flex-grow" />
			
			<el-menu-item index="0" :route="{name: 'home'}">任务中心</el-menu-item>
			<el-menu-item index="1" v-if="currentUser.is_staff" :route="{name: 'task-center'}">学生中心</el-menu-item>
			<el-menu-item index="2" v-if="currentUser.is_staff" :route="{name: 'task-extra'}">任务精讲</el-menu-item>
			<el-menu-item index="3" v-if="currentUser.is_staff" :route="{name: 'group'}">人员组管理</el-menu-item>
			<el-menu-item index="5" v-if="currentUser.is_staff" :route="{name: 'clazz'}">班级管理</el-menu-item>
			<el-menu-item index="6" v-if="currentUser.is_staff" :route="{name: 'stage'}">阶段管理</el-menu-item>
			<el-menu-item index="7" v-if="currentUser.is_staff" :route="{name: 'module'}">模块管理</el-menu-item>
			<el-sub-menu index="8">
			  <template #title>
				  <el-icon><Avatar /></el-icon>
				  <span style="margin-left:4px;">{{ currentUser.name }}</span>
				</template>
			  <el-menu-item @click="switchClazz">切换班级</el-menu-item>
			  <el-menu-item @click="modifyPwd">修改密码</el-menu-item>
			  <el-menu-item index="8-3" :route="{name: 'login'}">退出登录</el-menu-item>
			</el-sub-menu>
		</el-menu>
		
	</div>
</template>

<script>
import Token from '@/api/token.js' ;

export default {
	props: {
		activeIndex: {
			type: [String, Number],
			required: false,
			default: "0",
		}
	},
	methods: {
		switchClazz() {
			this.$layer.open({
				type: 2,
				title: '切换班级',
				shadeClose: true,
				shade: 0.5,
				area: ['480px', '200px'],
				btn: ['保存', '关闭'] ,
				content: '/clazz/switch',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		},
		modifyPwd() {
			this.$layer.open({
				type: 2,
				title: '修改密码',
				shadeClose: true,
				shade: 0.5,
				area: ['680px', '320px'],
				btn: ['保存', '关闭'] ,
				content: '/modify-pwd',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		}
	},
	data() {
		return {
			currentUser: Token.getUser(),
		}
	}
}
</script>

<style scoped>

.nav {
	width: 100%;
	background-color: #545c64 ;
	min-width: var(--max-width);
}

.el-menu {
	width: var(--max-width);
	margin: 0 auto;
}

.flex-grow {
  flex-grow: 1;
}
.form-control {
	padding: 30px 30px 10px;
}
</style>

